<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import * as admin from '@/api/indexdata.js';
import { Shop, Location, InfoFilled } from '@element-plus/icons-vue';

const route = useRoute();
const categoryId = route.query.id;

const foodList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const dianpuList = ref([]);

const selectedFood = ref(null);
const detailDialogVisible = ref(false);

const getFoodList = async () => {
  const params = {
    currentPage: currentPage.value,
    categoryId: categoryId,
  };
  const res = await admin.articleMeishiListService(params);
  foodList.value = res.data;
  total.value = res.total;
};

const handlePageChange = (page) => {
  currentPage.value = page;
  getFoodList();
};

const showDetail = async (food) => {
  selectedFood.value = food;
  detailDialogVisible.value = true;
  const param = {
    xiaoshiId: food.id,
  };
  const res = await admin.findDianpu(param)
  console.log(res)
  dianpuList.value = res.data
  // 假数据：你可以替换为真实 API 调用
  
};

const openShop = (url) => {
  window.open(url, '_blank');
};

onMounted(() => {
  getFoodList();
});
</script>

<template>
  <el-main>
    <el-row :gutter="20" justify="center">
      <el-col :span="18">
        <div class="food-list">
          <el-row :gutter="20">
            <el-col v-for="(food, index) in foodList" :key="index" :span="8">
              <el-card class="food-item" @click="showDetail(food)" style="cursor: pointer;">
                <img :src="food.img" alt="美食图片" class="food-image" />
                <div class="food-info">
                  <h3>{{ food.name }}</h3>
                  <p><strong>地址：</strong>{{ food.address }}</p>
                  <p><strong>价格：</strong>{{ food.price }} 元</p>
                  <p><strong>食材：</strong>{{ food.ingredients }}</p>
                  <div class="food-category">
                    <strong>类别：</strong>
                    <el-tag
                      v-for="(tag, tagIndex) in food.category.split(',')"
                      :key="tagIndex"
                      type="success"
                    >{{ tag }}</el-tag>
                  </div>
                  <p><strong>描述：</strong>{{ food.content }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePageChange"
            layout="prev, pager, next, jumper"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 美食详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" width="50%" title="美食详情" align-center>
      <template #default>
        <div v-if="selectedFood">
          <div class="food-detail-top">
            <img :src="selectedFood.img" class="food-detail-img" />
            <div class="food-detail-content">
              <h2>{{ selectedFood.name }}</h2>
              <p><strong>地址：</strong>{{ selectedFood.address }}</p>
              <p><strong>价格：</strong>{{ selectedFood.price }} 元</p>
              <p><strong>食材：</strong>{{ selectedFood.ingredients }}</p>
              <p><strong>描述：</strong>{{ selectedFood.content }}</p>
            </div>
          </div>

          <h3 style="margin-top: 20px;">关联店铺</h3>
          <el-row :gutter="16">
            <el-col v-for="(shop, idx) in dianpuList" :key="idx" :span="24" style="margin-bottom: 12px;">
              <el-card shadow="hover" @click="openShop(shop.url)"  style="cursor: pointer;">
                <el-row :gutter="12" align="middle">
                  <el-col :span="4">
                    <img
                      :src="shop.img"
                      alt="店铺图片"
                      style="width: 100%; height: 80px; object-fit: cover; border-radius: 6px;"
                    />
                  </el-col>
                  <el-col :span="20">
                    <div style="font-weight: bold; font-size: 16px; margin-bottom: 4px;">
                      <el-icon><Shop /></el-icon>
                      {{ shop.name }}
                    </div>
                    <div style="font-size: 13px; margin-bottom: 3px;">
                      <el-icon><Location /></el-icon>
                      <strong>地址：</strong>{{ shop.address }}
                    </div>
                    <div style="font-size: 13px; color: #666;">
                      <el-icon><InfoFilled /></el-icon>
                      {{ shop.content }}
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-main>
</template>

<style scoped>
.el-main {
  background-color: #f9f9f9;
  padding: 30px;
}

.food-list {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.food-item {
  margin-bottom: 25px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.food-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.food-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.food-item:hover .food-image {
  transform: scale(1.1);
}
.food-info {
  padding: 20px;
  font-size: 16px;
  color: #333;
}
.food-info h3 {
  font-size: 22px;
  font-weight: 600;
  color: #FF6347;
  margin-bottom: 12px;
}
.food-info p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 8px;
}
.food-category {
  margin-top: 10px;
  margin-bottom: 12px;
}
.food-category .el-tag {
  margin-right: 8px;
}

/* 弹窗 */
.food-detail-top {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.food-detail-img {
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}
.food-detail-content {
  flex: 1;
}
</style>
